﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Validation.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .auto-style1 {
            height: 36px;
        }
        .auto-style2 {
            width: 212px;
        }
        .auto-style3 {
            height: 36px;
            width: 212px;
        }
        .auto-style4 {
            width: 157px;
        }
        .auto-style5 {
            height: 36px;
            width: 157px;
        }
        .auto-style6 {
            width: 157px;
            height: 25px;
        }
        .auto-style7 {
            width: 212px;
            height: 25px;
        }
        .auto-style8 {
            height: 25px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="height: auto; border:2px solid #9900CC; width: 765px;">
    
        <h1 style="color: #9900CC; font-size: xx-large; margin-left: 204px; width: 501px;">Validation Control&nbsp; </h1>
        <div style="height: 556px; width: 764px;">
            <table style="width: 80%; height: 334px; margin-left: 130px;">
                <tr>
                    <th colspan="3" style="color: #3399FF ; text-align:left;font-size:20px">Form Register:</th>
                </tr>
                <tr>
                    <td class="auto-style4">UserNane:</td>
                    <td class="auto-style2">
                        <asp:TextBox ID="txtUsername" runat="server" Width="188px"></asp:TextBox>
                    </td>
                    <td>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please enter a UerName" ForeColor="Red" Display="Dynamic" SetFocusOnError="True" ControlToValidate="txtUsername">*</asp:RequiredFieldValidator>
                        <asp:RegularExpressionValidator ID="valName" runat="server" ControlToValidate="txtUsername" Display="Dynamic" ErrorMessage="Names must begin with the letter and  only  2 to 20 characters" ForeColor="Red" SetFocusOnError="True" ValidationExpression="^[a-zA-Z]{1}[a-zA-Z0-9]{1,20}$">*</asp:RegularExpressionValidator>
                    </td>
                </tr>
                
                <tr>
                    <td class="auto-style4">Age:</td>
                    <td class="auto-style2">
                        <asp:TextBox ID="txtAge" runat="server" Width="190px"></asp:TextBox>
                    </td>
                    <td>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="Please enter a age" ForeColor="Red" Display="Dynamic" SetFocusOnError="True" ControlToValidate="txtAge">*</asp:RequiredFieldValidator>
                        <asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="txtAge" ErrorMessage="Enter age between 10 to 120 " ForeColor="Red" MaximumValue="120" MinimumValue="10" SetFocusOnError="True" Type="Integer">*</asp:RangeValidator>
                    </td>
                </tr>
                 <tr>
                    <td class="auto-style4">Email:</td>
                    <td class="auto-style2">
                        <asp:TextBox ID="txtEmail" runat="server" Width="187px" style="margin-right: 0px"></asp:TextBox>
                     </td>
                    <td>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="Please enter a Email" ForeColor="Red" Display="Dynamic" SetFocusOnError="True" ControlToValidate="txtEmail">*</asp:RequiredFieldValidator>
                        <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtEmail" Display="Dynamic" ErrorMessage="Enter the correct email" ForeColor="Red" SetFocusOnError="True" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">*</asp:RegularExpressionValidator>
                     </td>
                </tr>
                 <tr>
                    <td class="auto-style4">Phone:</td>
                    <td class="auto-style2">
                        <asp:TextBox ID="txtPhone" runat="server" Width="189px"></asp:TextBox>
                     </td>
                    <td>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ErrorMessage="Please enter a Phone" ForeColor="Red" Display="Dynamic" SetFocusOnError="True" ControlToValidate="txtPhone">*</asp:RequiredFieldValidator>
                        <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="txtPhone" ErrorMessage="Enter numberPhone between (10 to11) number" ForeColor="Red" SetFocusOnError="True" ValidationExpression="^(0[0-9]{9,10})$">*</asp:RegularExpressionValidator>
                     </td>
                </tr>
                <tr>
                    <td class="auto-style6">Password:</td>
                     <td class="auto-style7">
                         <asp:TextBox ID="txtPassword" runat="server" Width="189px" TextMode="Password"></asp:TextBox>
                    </td>
                     <td class="auto-style8">
                         <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" Display="Dynamic" ErrorMessage="Please enter a password" ForeColor="Red" SetFocusOnError="True" ControlToValidate="txtPassword">*</asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td class="auto-style5">Re-Password:</td>
                     <td class="auto-style3">
                         <asp:TextBox ID="txtRepassword" runat="server" TextMode="Password" Width="188px" Height="21px"></asp:TextBox>
                    </td>
                     <td class="auto-style1">
                         <asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" Display="Dynamic" ErrorMessage="Please enter a Re-password" ForeColor="Red" SetFocusOnError="True" ControlToValidate="txtRepassword">*</asp:RequiredFieldValidator>
                         <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="txtPassword" ControlToValidate="txtRepassword" Display="Dynamic" ErrorMessage="CompareValidator" ForeColor="Red">*</asp:CompareValidator>
                    </td>
                </tr>
                <tr>
                    <td class="auto-style4">
                        &nbsp;</td>
                     <td class="auto-style2">
&nbsp;&nbsp;
                         </td>
                    <td></td>
                </tr>
                <tr>
                       <td>
                           &nbsp;</td> 
                      <td></td>
                    <td></td>
                </tr>

                <tr>
                       <td>
                           &nbsp;</td> 
                      <td>
                         <asp:Button ID="btnSubmit" runat="server" BackColor="Black" ForeColor="White" Text="Submit" Width="96px" OnClick="Button1_Click" />
                         <asp:Button ID="btnReset" runat="server" BackColor="Black" ForeColor="White" Text="Reset" Width="81px" OnClick="btnReset_Click" CausesValidation="False" />
                       </td>
                    <td>&nbsp;</td>
                </tr>

                <tr>
                       <td>
                        <asp:Label ID="Label1" runat="server" style="color: #00CC00"></asp:Label>
                       </td> 
                      <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>

                <tr>
                       <td>
                           <asp:ValidationSummary ID="ValidationSummary1" runat="server" ForeColor="Red" HeaderText="List of Error:" />
                       </td> 
                      <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>

            </table>
        </div>
    
    </div>
    </form>
</body>
</html>
